<template>
  <label>
    <input 
      class="radio-box" 
      type="radio" 
      :name='name' 
      :value='value'
      @click="change" 
    />
    <slot></slot>
  </label>
</template>
<script>
import {Tools} from '../lib/tools'
export default {
  data() {
    return {
      currentValData: this.currentVal
    }
  },
  watch: {
    currentVal(value) {
      this.currentValData = value
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    currentVal: {
      type: String,
      default: ''
    }
  },
  methods: {
    change(e) {
      if (this.currentValData == e.target.defaultValue) this.currentValData = '';
      else this.currentValData = e.target.defaultValue;
      this.$emit('on-change', this.currentValData)
    }
  }
}
</script>
<style lang="less" scoped>
.radio-box{
  display: none;
}
</style>
